import React,{Fragment} from "react"
import Mycss from "./style/index.module.css"
import houtui2 from "./img/后退 (2).png"
import dianzan from "./img/点赞.png"
import dianzan1 from "./img/点赞 (1).png"
class Comment extends React.Component{
constructor(){
super()
this.state={
    commentCounts:"",
    picUrl:"",
    songName:"",
    songMes:"",
    hotCommentss:[],
    songid:"",
    isDianzan:false,
    i:[],
}
}
componentWillMount(){
    const songid=this.props.location.songid
    // fetch("http://106.12.79.128:666/comment/music?id=409872504")
    fetch(`http://106.12.79.128:666/comment/music?id=${songid}`,{
        credentials:'include'
    })
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
        this.setState({
            commentCounts:res.total,
            hotCommentss:res.hotComments
        })
    })
    // fetch(`http://106.12.79.128:666/song/detail?ids=409872504`)
    fetch(`http://106.12.79.128:666/song/detail?ids=${songid}`,{
        credentials:'include'
    })
    .then(body=>body.json())
    .then(res=>{
        // console.log(res)
        this.setState({
            picUrl:res.songs[0].al.picUrl,
            songName:res.songs[0].name,
            songMes:res.songs[0].alia[0],
            songid:res.songs[0].id
        })
    })
}



deleteItem (i, list) {
    list.forEach((item,index)=>{
        if(item==i){
            return list.splice(index,1)
        }
    })
}
dianzan(index){
    let res=this.state.i.filter(item=>item===index)
    if(res.length!=[]){
        this.deleteItem(index,this.state.i)
        this.setState({})
        console.log(this.state.i)
        return
    }
    this.state.i.push(index)
    console.log(this.state.i)
    this.setState({})
}


liked(cid,i){
fetch(`http://106.12.79.128:666/comment/like?id=${this.state.songid}&cid=${cid}&t=1&type=0`,{
    credentials:'include'
})
.then(body=>body.json())
.then(res=>{
   if(res.code===200){
    this.setState({
        // isDianzan:!this.state.isDianzan
    })
    this.dianzan(i)
   }
})
}
fanhui(){
    // const id=this.props.location.id
    const songid=this.props.location.songid
    const playlistid=this.props.location.playlistid
    this.props.history.push({pathname:"/song",songid,playlistid})
}
render(){
    return(
        <div className={Mycss.comments}>
        <div className={Mycss.commentTop}>
           <img src={houtui2} alt="" className={Mycss.houtui2icon} onClick={this.fanhui.bind(this)}/><div className={Mycss.commentCounts}>评论({this.state.commentCounts})</div>
        </div>
        <div className={Mycss.songsDetails}>
            <div><img src={this.state.picUrl} alt="" className={Mycss.songsPic}/></div>
        {/* <div className={Mycss.gequdexinxi}>{this.state.songName}({this.state.songMes})</div> */}
    <div className={Mycss.gequdexinxi}>{this.state.songName}{this.state.songMes===""?`(${this.state.songMes})`:""}</div>
        </div>
        <div className={Mycss.kongge}></div>
        <div className={Mycss.jingcaipinglun}>
            <div className={Mycss.pingluntitle}>精彩评论</div>
            {/* 遍历评论 */}
            <ul>
            {this.state.hotCommentss.map((item,index)=><li key={index} className={Mycss.liss}>
            <div className={Mycss.userMes}>
            <img src={item.user.avatarUrl} alt="" className={Mycss.userAvatars}/>
            <div className={Mycss.timer}>
    <div className={Mycss.nickname}><div className={Mycss.nickname1}>{item.user.nickname}</div><div className={Mycss.dianzanicon1} onClick={this.liked.bind(this,item.commentId,index)}><img src={this.state.i.filter(item=>item===index).length!==0?dianzan1:dianzan} alt="" className={Mycss.dianzanicon}/>{this.state.i.filter(item=>item===index).length!==0?item.likedCount+1:item.likedCount}</div></div>
        <div className={Mycss.time}>{parseInt(1970+item.time/1000/31536000)}年{1+parseInt((item.time/1000/31536000-parseInt(item.time/1000/31536000))*365/30)}月
        {Math.ceil((((item.time/1000/31536000-parseInt(item.time/1000/31536000))*365)/30-parseInt(((item.time/1000/31536000-parseInt(item.time/1000/31536000))*365)/30))*30+(item.time/1000/31536000-parseInt((item.time/1000/31536000)/30)*30)-30)}日
        </div>
        </div>
            </div>
            <div className={Mycss.commentss}>
            {item.content}
            </div>
            <div className={Mycss.kongge2}></div>
            </li>)}
            </ul>
        </div>
        </div>
    )
}
}
export default Comment